<template>
    <div class="pl-container">
        <div>
            <div class="pl-detail-container">
                <img :src="detailMsg.coverImg">
                <div class="detail-box">
                    <div class="title">{{detailMsg.name}}</div>
                    <div class="creator">
                        <img :src="detailMsg.creator.creatorImg">
                        <div style="width: 10px"></div>
                        {{detailMsg.creator.nickname}}
                        <div style="width: 10px"></div>
                        <div style="color: gray; font-size: small">创建于{{detailMsg.createTime}}</div>
                    </div>
                    <div class="opt-btn-box">
                        <button>
                            <img src="../../../../assets/main/playList/fav.png">
                            收藏({{ detailMsg.count.subscribedCount }})
                        </button>
                        <button>
                            <img src="../../../../assets/main/playList/commit.png">
                            评论({{detailMsg.count.commentCount}})
                        </button>
                        <button>
                            <img src="../../../../assets/main/playList/share.png">
                            分享({{detailMsg.count.shareCount}})
                        </button>
                    </div>
                    <div style="display: flex; align-items: center; justify-content: space-between">
                        <div  v-if="detailMsg.tags.length != 0">
                            标签:
                            <tag v-for="item of detailMsg.tags" :key="item">{{item}}</tag>
                        </div>
                        <div  v-if="detailMsg.tags.length == 0">
                            暂无标签
                        </div>
                        <button class="des-btn" v-if="!isShowDes" @click="showOrHideDes">查看描述↓</button>
                        <div v-if="isShowDes"></div>
                    </div>
                </div>
            </div>
            <div class="des-box" v-if="isShowDes">
                <p v-if="detailMsg.description != ''">{{ detailMsg.description }}</p>
                <p v-if="detailMsg.description == ''">暂无描述</p>
                <div style="display: flex;justify-content: space-between">
                    <div></div>
                    <button class="des-btn" @click="showOrHideDes">↑收起描述</button>
                </div>
            </div>
        </div>
    </div>
    <div style="height: 15px"></div>

</template>

<script>
import tag from "./tag.vue";
import {watch, ref, reactive, onMounted} from "vue";
import {playListApi} from "../../../../api/playListApi.js";
export default {
    name: "playListDetail",
    props:['id'],
    components:{
        tag
    },
    setup(props) {
        let isShowDes = ref(false)

        let detailMsg = reactive({
            name:'',
            coverImg:'',
            createTime:'',
            tags:[],
            description:'',
            creator:{
                nickname:'',
                creatorImg:''
            },
            count:{
                shareCount:'',
                commentCount:'',
                subscribedCount:'',
                playCount:''
            }
        })

        /*
        * 设置参数
        * */
        function updateMsg(data) {
            detailMsg.name = data.name
            detailMsg.coverImg = data.coverImgUrl
            detailMsg.createTime = new Date( data.createTime).toLocaleDateString()
            detailMsg.creator.nickname = data.creator.nickname
            detailMsg.creator.creatorImg = data.creator.avatarUrl
            detailMsg.tags = data.tags
            detailMsg.description = data.description

            detailMsg.count.commentCount = data.commentCount
            detailMsg.count.shareCount = data.shareCount
            detailMsg.count.subscribedCount = data.subscribedCount
        }

        /*
        * 获取信息
        * */
        async function getPlayListDetail(id) {
            await playListApi.playListDetail(id, res=>{
                updateMsg(res.data.playlist)
            },reason=>{
                console.warn(reason)
            })
        }

        function showOrHideDes() {
            isShowDes.value = !isShowDes.value
        }

        watch(props,(value)=>{
            getPlayListDetail(value.id)
        })

        onMounted(async ()=>{
            await getPlayListDetail(props.id)
        })

        return {
            detailMsg,
            isShowDes,
            showOrHideDes
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../../../style";

.pl-container {
    position: relative;
    width: 100%;
    height: auto;

}

.pl-detail-container {
    .inner-pos(none);
    width: 100%;
    height: auto;
    &>img {
        width: 150px;
        height: 150px;
        margin: 0 15px 0 0;
        border-radius: 10px;
    }
}

.detail-box {
    height: 100%;
    width: 100%;
    .title {
        .inner-pos(none);
        height: 40px;
        font-size: 25px;
    }

    .creator {
        .inner-pos(none);
        padding: 5px;
        height: 40px;
        width: auto;
        img {
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    }

    .opt-btn-box {
        .inner-pos(none);
        height: 35px;
        width: auto;
        button {
            .btn-no-border;
            .inner-pos(none);
            padding: 2px 10px 2px 10px;
            margin: 0 10px 0 0;
            height: 30px;
            width: auto;
            background-color: white;
            color: gray;
            img {
                font-size: small;
                width: 20px;
                height: 20px;
                margin: 0 5px 0 0 ;
            }
        }
    }
}

.des-box {
    width: 100%;
    height: auto;
}

.des-btn {
    padding: 0;
    margin: 0;
    background-color: transparent;
    .btn-no-border
}



</style>